<html>

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <head>

  </head>
  <body>
    <div id="component1">
     
     {{$store.state.msg}}
    </div>


    <div id="component2">
     
      {{this.$store.state.msg}}
      <button @click="change">ddddd</button>
     </div>
  </body>
  <script>

const Vuex = {}
Vuex.install = function (Vue) {
  console.log('install 方法开始执行')
  const store = {} // 声明一个对象
  store.state = new Vue({ // 赋予 state 属性，用来获取值
    data () {
      return {
        msg: '哈哈'
      }
    }
  })
  store.mutations = { // 赋予 mutations 属性，用来修改值
    SETMSG(value) {
      store.state.msg = value
    }
  }

  Vue.mixin({ // 也是固定写法：每个组件都会执行下面这个生命周期
    beforeCreate () {
      this.$store = store // 于是每个组件都会有 this.$store，并且都指向同一个 store
    }
  })
}

Vue.use(Vuex)





let v1 = new Vue({
  el: '#component1',
  
})


console.log(v1)
let v2 = new Vue({
  el: '#component2',
  computed: {
    data() {
      return this.$store.state.msg
    }
  },
  methods: {
    change() {
      console.log('chage')
      this.$store.mutations.SETMSG('这是 mutations 触发的值')
    }
  },
  updated(){
    console.log('updateaeee')
  }
})
console.log(v2)






  </script>
</html>